<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <g:set var="entityName" value="${message(code: 'community.label', default: 'Community')}" />
    <title>小区评估详情</title>
    %{--swiper.css--}%
    <asset:stylesheet src="intelligence/swiper.css"/>
    <asset:stylesheet src="intelligence/style.css"/>
    <asset:stylesheet src="intelligence/reset.css"/>



    <style type="text/css">
    a:hover, a:focus{
        color: rgba(33,150,243,1);
    }
    a{
        cursor: pointer;
        color: rgba(33,150,243,1);
    }
    /*nav高度*/
    .navLeftlog{
        height: 56px;
    }
    body{
        background: #f2f3f7;
    }
    .header{
        background: #2196F3;
    }
    .nav-link{
        color: rgba(153,153,153,1);
        font-size: 14px;
        padding: 1rem 0.2rem;
    }
    /*表格*/
    .table th,.table td{
        font-size: 14px;
    }
    .table tr:hover{
        background: rgba(247, 251, 255, 1)!important;
    }
    .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{
        border-bottom-width: 1px;
    }
    /*分页器*/
    .step:hover{
        background: #2196F3;
        color: #fff;
        border-color:#2196F3;
    }
    </style>
</head>
<body>
<!-- main -->
<div class="main">
    <div class="width" style="margin: 0 auto;">
        %{--${community.communityname}--}%
        <div class="pull-left houseDetailPageName">${this.community?.communityname}</div>
        <!-- 评分 -->
        <div class="pull-left houseDetailScore">
            <section class="pull-left">综合评定：</section>
            <div class="pull-left">
                <asset:image src="solid.png" class="starPosition"/>
                <asset:image src="solid.png" class="starPosition"/>
                <asset:image src="solid.png" class="starPosition"/>
                <asset:image src="solid.png" class="starPosition"/>
                <asset:image src="dashed.png"/>
            </div>
            <p class="pull-left">分</p>
        </div>

        <div class="clearfix"></div>
        <div class="mainBody">
            %{--swiper轮播图--}%
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <g:if test="${com.cindata.base.Picture.findAllByAddress(com.cindata.base.Address.findById(this.community?.id))}">
                        <g:each in="${com.cindata.base.Picture.findAllByAddress(com.cindata.base.Address.findById(this.community?.id))}">
                            <div class='swiper-slide'><image src='${it?.url}' class='swiperImg'/></div>
                        </g:each>
                    </g:if>
                    <g:else>
                        <image src='/assets/january.jpg' class='swiperImg' />
                    </g:else>
                %{--<div class="swiper-slide"><asset:image src="january.jpg" class="swiperImg"/></div>--}%
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination">111</div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>
            <!-- 小区详情信息 -->
            <div class="houseDetailInformation">
                <div class="detailBox_1 pull-left">
                    <div>小区名称：<span class="DetailColor">${this.community?.communityname?:"--"}</span></div>
                    <div id="houseAddressLong">小区地址：<span class="DetailColor">${this.community?.detailaddress?:"--"}</span></div>
                    <div>所属板块：<span class="DetailColor">暂无数据</span></div>
                    <div>总建筑面积：<span class="DetailColor">${this.community?.buildingarea?:"--"}平方米</span></div>
                    <div>容积率：<span class="DetailColor">${this.community?.plotratio ?:"--"} </span></div>
                    <div>总楼栋数：<span class="DetailColor">${this.community?.totalbuildingcount?:"--"}栋</span></div>
                    <div>物业费：<span class="DetailColor">${this.community?.pmfee?:"--"}</span></div>
                    <div>开发商：<span class="DetailColor">${this.community?.developer?:"--"}</span></div>
                    <div>建筑类别：<span class="DetailColor">${this.community?.buildingtype?:"--"}</span></div>
                    %{--<div><a href="/unit/shop?id=145994844">ssssssssssssssss</a></div>--}%
                    %{--<div><a href="/unit/carport?id=145994844">ssssssssssssssss</a></div>--}%
                </div>

                <div class="detailBox_3 pull-left">
                    <div>小区别名：<span class="DetailColor">暂无数据</span></div>
                    <div style="margin-top: 68px;">建成年份：<span class="DetailColor">${this.community?.buildyear?:"--"}年</span></div>
                    <div>总占地面积：<span class="DetailColor">${this.community?.coveringarea?:"--"}平方米</span></div>
                    <div>绿化率：<span class="DetailColor">${this.community?.greeningrate?:"--"}%</span></div>
                    <div>总户数：<span class="DetailColor">${this.community?.totalhouseholdcount?:"--"}户</span></div>
                    <div>停车费：<span class="DetailColor">${this.community?.carparkrate?:"--"}</span></div>
                    <div>物业公司：<span class="DetailColor">${this.community?.propertymanagementcompany?:"--"}</span></div>
                    <div>建筑结构：<span class="DetailColor">${this.community?.structure?:"--"}</span></div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 小区交易数据 -->
<div class="houseDealData">
    <div class="houseDealContent">
        <ul class="plateData">
            <li class="everyTitle">交易数据</li>
            <li class="tabActive houseDealContentActive">二手成交案例</li>
            <li class="tabActive">一手成交案例</li>
            <li class="tabActive">挂牌案例</li>
            <li class="tabActive">法拍案例</li>
            <li class="tabActive">出租案例</li>
        </ul>
    </div>

    <table class="table table-hover mb-0 dealTable">
        <thead class="tableFontColor">
        <tr>
            <th>小区名称</th>
            <th>所在层</th>
            <th>总楼层</th>
            <th>朝向</th>
            <th>建筑面积（m2）</th>
            <th>成交单价（元/ m2）</th>
            <th>成交总价</th>
            <th>成交日期</th>

        </tr>
        </thead>
        <tbody>

        <g:if test="${saleCount2==0}">
            <tr><td colspan="8">暂无交易记录</td></tr>
        </g:if>
        <g:else>
            <g:each in="${saleList2}">
                <tr>
                    <td scope="row">${it[0]}</td>
                    <td scope="row">${it[1]}</td>
                    <td scope="row">${it[2]}</td>
                    <td scope="row">${it[3]}</td>
                    <td scope="row">${it[4]}</td>
                    <td scope="row">${it[5]}</td>
                    <td scope="row">${it[6]}</td>
                    <td scope="row"><g:formatDate date="${it[7]}" format="yyyy-MM-dd "></g:formatDate></td>

                </tr>
            </g:each>
        </g:else>


        </tbody>
    </table>
    <table class="table table-hover mb-0 dealTable hide">
        <thead class="tableFontColor">
        <tr>
            <th>小区名称</th>
            <th>所在层</th>
            <th>总楼层</th>
            <th>朝向</th>
            <th>建筑面积（ m2）</th>
            <th>成交单价（元/ m2）</th>
            <th>成交总价</th>

            <th>成交日期</th>

        </tr>
        </thead>
        <tbody>

        <g:if test="${saleCount1==0}">
            <tr><td colspan="8">暂无交易记录</td></tr>
        </g:if>
        <g:else>
            <g:each in="${saleList1}">
                <tr>
                    <td scope="row">${it[0]}</td>
                    <td scope="row">${it[1]}</td>
                    <td scope="row">${it[2]}</td>
                    <td scope="row">${it[3]}</td>
                    <td scope="row">${it[4]}</td>
                    <td scope="row">${it[5]}</td>
                    <td scope="row">${it[6]}</td>
                    %{--<td scope="row">${it[7]}</td>--}%
                    <td scope="row"><g:formatDate date="${it[7]}" format="yyyy-MM-dd"></g:formatDate></td>
                </tr>
            </g:each>
        </g:else>


        </tbody>
    </table>
    <table class="table table-hover mb-0 dealTable hide">
        <thead class="tableFontColor">
        <tr>
            <th>小区名称</th>
            <th>所在层</th>
            <th>总楼层</th>
            <th>朝向</th>
            <th>建筑面积（ m2）</th>
            <th>挂牌单价（元/ m2）</th>
            <th>挂牌总价</th>
            <th>挂牌日期</th>
        </tr>
        </thead>
        <tbody>

        <g:if test="${netListingCount==0}">
            <tr><td colspan="8">暂无交易记录</td></tr>
        </g:if>
        <g:else>
            <g:each in="${netListingList}">
                <tr>
                    <td scope="row">${it[0]}</td>
                    <td scope="row">${it[1]}</td>
                    <td scope="row">${it[2]}</td>
                    <td scope="row">${it[3]}</td>
                    <td scope="row">${it[4]}</td>
                    <td scope="row">${it[5]}</td>
                    <td scope="row">${it[6]}</td>
                    <td scope="row"><g:formatDate date="${it[7]}" format="yyyy-MM-dd"></g:formatDate></td>

                </tr>
            </g:each>
        </g:else>


        </tbody>
    </table>
    <table class="table table-hover mb-0 dealTable hide">
        <thead class="tableFontColor">
        <tr>
            <th>小区名称</th>
            <th>楼层</th>
            <th>朝向</th>
            <th>建筑面积(㎡)</th>
            <th>法拍次数</th>
            <th>评估单价（元/ m2）</th>
            <th>成交单价（元/ m2）</th>
            <th>成交总价</th>

            <th>成交日期</th>
        </tr>
        </thead>
        <tbody>

        <g:if test="${foreclosureCount==0}">
            <tr><td colspan="9">暂无交易记录</td></tr>
        </g:if>
        <g:else>
            <g:each in="${foreclosureList}">
                <tr>
                    <td scope="row">${it[0]}</td>
                    <td scope="row">${it[1]}</td>
                    <td scope="row">${it[2]}</td>
                    <td scope="row">${it[3]}</td>
                    <td scope="row">${it[4]}</td>
                    <td scope="row">${it[5]}</td>
                    <td scope="row">${it[6]}</td>
                    <td scope="row">${it[7]}</td>
                    <td scope="row"><g:formatDate date="${it[8]}" format="yyyy-MM-dd"></g:formatDate></td>
                </tr>
            </g:each>
        </g:else>


        </tbody>
    </table>
    <table class="table table-hover mb-0 dealTable hide">
        <thead class="tableFontColor">
        <tr>
            <th>小区名称</th>
            <th>所在层</th>
            <th>总楼层</th>
            <th>出租面积（m2）</th>
            <th>房型</th>
            <th>出租价格(元/月)</th>
            <th>租赁方式</th>
            <th>装修</th>
            <th>发布日期</th>
        </tr>
        </thead>
        <tbody>

        <g:if test="${rentCount==0}">
            <tr><td colspan="9">暂无交易记录</td></tr>
        </g:if>
        <g:else>
            <g:each in="${rentList}">
                <tr>
                    <td scope="row">${it[0]}</td>
                    <td scope="row">${it[1]}</td>
                    <td scope="row">${it[2]}</td>
                    <td scope="row">${it[3]}</td>
                    <td scope="row">${it[4]}</td>
                    <td scope="row">${it[5]}</td>
                    <td scope="row">${it[6]}</td>
                    <td scope="row">${it[7]}</td>
                    <td scope="row"><g:formatDate date="${it[8]}" format="yyyy-MM-dd"></g:formatDate></td>
                </tr>
            </g:each>
        </g:else>


        </tbody>
    </table>
    <!-- grails分页器 -->
    <div class="btn-group flex pagings">
        %{--<g:paginate total="54" params="${params}"/>--}%
        <g:paginate total="${tradeCount?: 0}" params="${params}"/>
    </div>
</div>

<!-- 周边配套 -->
<div class="aroundFacilities">
    <div class="aroundFacilitiesContent">
        <ul class="plateData">
            <li class="everyTitle" class="aroundFacilitiesFont">周边配套</li>
        </ul>
        <input type="hidden" id="surroundingType" value="2" />
    </div>
    <!-- 加载arcgis地图 -->
    <div id="mapDiv" style="width:100%; height: 568px; position:relative;z-index:1">
        <div class="mapDiv">

            <div class="mapDivNav solidActive traffic">
                <ul class="pull-left">
                    <li class="grayCircle round_background" id="traffic"><asset:image src="traffic1.png" class="traffic_img"/></li>
                    <li class="navFont ">交通</li>
                </ul>
            </div>

            <div class="mapDivNav banks">
                <ul class="pull-left">
                    <li class="grayCircle" id="bank"><asset:image src="bank.png" class="bank_img"/></li>
                    <li class="navFont navFontaa">银行</li>
                </ul>
            </div>

            <div class="mapDivNav school">
                <ul class="pull-left">
                    <li class="grayCircle" id="school"><asset:image src="school.png" class="school_img"/></li>
                    <li class="navFont navFontaa">学校</li>
                </ul>
            </div>

            <div class="mapDivNav market">
                <ul class="pull-left">
                    <li class="grayCircle" id="market"><asset:image src="market.png" class="market_img"/></li>
                    <li class="navFont navFontaa">商场</li>
                </ul>
            </div>

            <div class="mapDivNav hospita" style="margin-left: 1px;">
                <ul class="pull-left">
                    <li class="grayCircle" id="hospital"><asset:image src="hospital.png" class="hospita_img"/></li>
                    <li class="navFont navFontaa">医院</li>
                </ul>
            </div>

            <div class="mapDivNav gasStation" style="margin-left: 1px;">
                <ul class="pull-left">
                    <li class="grayCircle" id="gasStation"><asset:image src="gasStation.png" class="gasStation_img"/></li>
                    <li class="navFont navFontaa">加油站</li>
                </ul>
            </div>
            <div class="clearfix"></div>

            <div class="aroundContent" id="surroundingResult">

                %{--<div class="peitaoHover">--}%
                    %{--<div class="eachData">--}%
                        %{--<div><asset:image src="dibiao.png" class="dibiao"/><p class="dataName">天通苑地铁站</p></div>--}%
                        %{--<div class="numberPostion">1</div>--}%
                        %{--<div class="clearfix"></div>--}%
                        %{--<div class="dataRote">地铁五号线</div>--}%
                    %{--</div>--}%
                %{--</div>--}%

            </div>
        </div>
    </div>
    %{--<button id="btn_point" type="button" style="z-index:999;left:50px;top:50px">点</button>--}%
    %{--距离:<input id="banjing" type="text" style="width:20px" value="1"/>千米--}%
    %{--<div style="width: 1200px; height: 565px; background: #fff;"></div>--}%

</div>

<!-- 市场分析 -->
<div class="marketAnalyse">
    <div class="marketAnalyseContent">
        <ul class="plateData_1">
            <li class="everyTitle marketAnalyseContentLi">市场分析</li>
            <li class="marketAnalyseContentActive tabActive_1">价格走势</li>
            <li class="tabActive_1" id="rentTrend">租金走势</li>
            <li class="tabActive_1" id="saleMarket">挂牌出售</li>
            <li class="tabActive_1" id="rentMarket">挂牌出租</li>
            <li class="tabActive_1" id="marketTime">挂牌时长</li>
            <li class="tabActive_1" id="saleRentRadio">租售比</li>
        </ul>
    </div>
    %{--价格走势--}%
    <div id="main_1"></div>
    %{--租金走势--}%
    <div id="main_2" style="width: 1200px; height: 569px; display: none"></div>
    %{--挂牌出售--}%
    <div id="main_3" style="width: 1200px; height: 569px; display: none"></div>
    %{--挂牌出租--}%
    <div id="main_4" style="width: 1200px; height: 569px; display: none"></div>
    %{--挂牌时长--}%
    <div id="main_5" style="width: 1200px; height: 569px; display: none"></div>
    %{--租售比--}%
    <div id="main_6" style="width: 1200px; height: 569px; display: none"></div>
</div>

<!-- 楼栋表 -->
<div class="buildTable">
    <div class="buildTableContent">
        <ul class="plateData">
            <li class="everyTitle buildTableContentLi">楼栋表</li>
        </ul>
    </div>

    <table class="table table-bordered" style="text-align: center;">
        <thead class="tableFontColor">
        <tr>
            <td>楼栋</td>
            <td colspan="9">单元</td>
        </tr>
        </thead>
        <tbody class="communityTable">

        </tbody>
    </table>


    <!-- 分页器 -->
    %{--<div class="btn-group flex pagings">--}%
    %{--<g:paginate total="9999" params="${params}"/>--}%
    %{--<g:paginate total="${tradeCount?: 0}" params="${params}"/>--}%
    %{--</div>--}%
</div>

%{--footer--}%
<footer class="footerText">
    <section class="serverPhone">客服电话：400-077-0101</section>
    <section class="companyName">2017 © 北京国信达数据技术有限公司</section>
</footer>

%{--swiper.js--}%
<asset:javascript src="intelligence/swiper.js"/>
%{--echarts.js--}%
<asset:javascript src="intelligence/echarts.js" />
%{--arcgis.css--}%
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
%{--arcgis.js--}%
<script src="https://js.arcgis.com/4.5/"></script>
<asset:javascript src="intelligence/ts.js"/>
%{--初始化swiper.js--}%
<script>
    var swiper = new Swiper('.swiper-container',{
        loop:true,
        autoplay:1000,
        slidesPerView: 1,
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    $(function () {
        var coor=[]
        coor[0]=${community.longitude}
            coor[1]=${community.latitude}
//            $("#btn_point").click()
            DrawGra(coor);
        $("#traffic").click(function () {
            $("#surroundingType").val(2)
            DrawGra(coor);
        });
        $("#bank").click(function () {
            $("#surroundingType").val(1)
            DrawGra(coor);
        });

        $("#school").click(function () {
            $("#surroundingType").val(6)
            DrawGra(coor);
        });
        $("#market").click(function () {
            $("#surroundingType").val(4)
            DrawGra(coor);
        });
        $("#hospital").click(function () {
            $("#surroundingType").val(7)
            DrawGra(coor);
        });
        $("#gasStation").click(function () {
            $("#surroundingType").val(3)
            DrawGra(coor);
        });
    })
</script>
<script>


    //时间
    var rentDate1='${arrRentDate}'.split("[")
    var rentDate2=rentDate1[1].split("]")
    var rentDate=rentDate2[0].split(",")

    //租金走势
    $("#rentTrend").click(function () {
        $("#main_2").show()
        $("#main_1").hide()
        $("#main_3").hide()
        $("#main_4").hide()
        $("#main_5").hide()
        $("#main_6").hide()
        var myChart2 = echarts.init(document.getElementById('main_2'));
        //租金价格趋势
        var rentPrice1='${arrRentPrice}'.split("[")
        var rentPrice2=rentPrice1[1].split("]")
        var rentPrice=rentPrice2[0].split(",")
        if(rentPrice.length==0||rentDate.length==0)
        {
            $("#main_2").html("暂无数据")
        }
        var option = {
//        title : {
//            text: '租金走势',
//            x:'center'
//        },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['挂牌价格'],
                x:'left',
                y:'top'
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : rentDate,
                    name :'时间'
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    scale:true,
                    name : '价格'
                }
            ],
            series : [
                {
                    name:'挂牌价格',
                    type:'line',
                    smooth:true,
                    data:rentPrice,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        console.log("kkkk")
        //使用制定的配置项和数据显示图表
        myChart2.setOption(option);
    });
    //价格趋势
    $(function () {
        priceTrend()
    })
    function priceTrend(){
        $("#main_1").show()
        $("#main_2").hide()
        $("#main_3").hide()
        $("#main_4").hide()
        $("#main_5").hide()
        $("#main_6").hide()
        var myChart1 = echarts.init(document.getElementById('main_1'));
        myChart1 .innerHTML=""
        if('${dateCount}'==0)
        {
            $("#main_1").html("暂无数据")
        }
        var ss='${priceDate}'.split("[")
        var ss1=ss[1].split("]")
        var ss2=ss1[0].split(",")

        var aa='${standardPrice}'.split("[")
        var aa1=aa[1].split("]")
        var aa2=aa1[0].split(",")

        //指定图标的配置和数据
        var option = {
//                 title : {
//                     text: '价格走势',
//                     x:'center'
//                 },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['基准价'],
                x:'left',
                y:'top'
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ss2,
                    name :'时间'
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    scale:true,
                    name : '价格'
                }
            ],
            series : [
                {
                    name:'基准价',
                    type:'line',
                    smooth:true,
                    data:aa2,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        //使用制定的配置项和数据显示图表
        myChart1.setOption(option);
    }
    $(".marketAnalyseContentActive").click(function () {
        priceTrend()
    });

    //挂牌出售
    $("#saleMarket").click(function () {
        $("#main_1").hide()
        $("#main_2").hide()
        $("#main_3").show()
        $("#main_4").hide()
        $("#main_5").hide()
        $("#main_6").hide()
        var myChart3 = echarts.init(document.getElementById('main_3'));
        //出售量
        var marketSaleCtIndex1='${marketSaleCtIndex}'.split("[")
        var marketSaleCtIndex2=marketSaleCtIndex1[1].split("]")
        var marketSaleCtIndex=marketSaleCtIndex2[0].split(",")
        //出售价
        var marketSaleIndex1='${marketSaleIndex}'.split("[")
        var marketSaleIndex2=marketSaleIndex1[1].split("]")
        var marketSaleIndex=marketSaleIndex2[0].split(",")
        //指定图标的配置和数据
        option = {
//                 title : {
//                     text: '挂牌出售',
//                     x:'center'
//                 },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:['出售量指数','出售价指数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: rentDate,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '均价（元/平方米）',
                    scale:true,
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '挂牌量（套数）',
                    scale:true,
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [

                {
                    name:'出售量指数',
                    type:'bar',
                    data:marketSaleCtIndex
//                         data:[67,89,45,78,33]
                },
                {
                    name:'出售价指数',
                    type:'line',
                    yAxisIndex: 1,
                    data:marketSaleIndex
//                         data:[35,56,34,66,90]
                }
            ]
        };
        myChart3.setOption(option);
    });

    //挂牌出租
    $("#rentMarket").click(function () {
        $("#main_1").hide()
        $("#main_2").hide()
        $("#main_3").hide()
        $("#main_4").show()
        $("#main_5").hide()
        $("#main_6").hide()
        var myChart4 = echarts.init(document.getElementById('main_4'));
        //出租量
        var marketRentCtIndex1='${marketRentCtIndex}'.split("[")
        var marketRentCtIndex2=marketRentCtIndex1[1].split("]")
        var marketRentCtIndex=marketRentCtIndex2[0].split(",")
        //出租价
        var marketRentIndex1='${marketRentIndex}'.split("[")
        var marketRentIndex2=marketRentIndex1[1].split("]")
        var marketRentIndex=marketRentIndex2[0].split(",")
        //指定图标的配置和数据
        option = {
//                 title : {
//                     text: '挂牌出租',
//                     x:'center'
//                 },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data:['出租量指数','出租价指数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: rentDate,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '均价（元/平方米）',
                    scale:true,
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '挂牌量（套数）',
                    scale:true,
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [

                {
                    name:'出租量指数',
                    type:'bar',
                    data:marketRentCtIndex
//                         data:[100,200,150,200,321]
                },
                {
                    name:'出租价指数',
                    type:'line',
                    yAxisIndex: 1,
                    data:marketRentIndex
//                         data:[100,200,150,200,321]
                }
            ]
        };
        //使用制定的配置项和数据显示图表
        myChart4.setOption(option);
    });


    //租售比
    $("#saleRentRadio").click(function () {
        $("#main_1").hide()
        $("#main_2").hide()
        $("#main_3").hide()
        $("#main_4").hide()
        $("#main_5").hide()
        $("#main_6").show()
        var myChart6 = echarts.init(document.getElementById('main_6'));
//             myChart1 .innerHTML=""
        //租售比
        console.log(${rentSaleRatio}[0])
        var rentSaleRatio1='${rentSaleRatio}'.split("[")
        var rentSaleRatio2=rentSaleRatio1[1].split("]")
        var rentSaleRatio=rentSaleRatio2[0].split(",")

        option = {
//                 title: {
//                     text: '租售比',
//                 },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['租售比']
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: rentDate
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} '
                }
            },
            series: [
                {
                    name:'租售比',
                    type:'line',
//                         data:[11, 11, 15, 13, 12],
                    data: rentSaleRatio,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        myChart6.setOption(option);
    });

    $("#marketTime").click(function () {
        $("#main_1").hide()
        $("#main_2").hide()
        $("#main_3").hide()
        $("#main_4").hide()
        $("#main_5").show()
        $("#main_6").hide()
        var myChart5 = echarts.init(document.getElementById('main_5'));
        var listDate=""
        listDate+="<div><span></span>平均挂牌时间<span>"+${listingDateAverage}[0]+"</span></div>"
        listDate+="<div><span>最短挂牌时间</span><span>"+${listingDateShortest}[0]+"</span></div>"
        listDate+="<div><span>最长挂牌时间</span><span>"+${listingDateLongest}[0]+"</span></div>"
        $("#main_5").html(listDate)

        %{--//平均挂牌时间--}%
        %{--var listingDateAverage1='${listingDateAverage}'.split("[")--}%
        %{--var listingDateAverage2=listingDateAverage1[1].split("]")--}%
        %{--var listingDateAverage=listingDateAverage2[0].split(",")--}%
        %{--//最短挂牌时间--}%
        %{--var listingDateShortest1='${listingDateShortest}'.split("[")--}%
        %{--var listingDateShortest2=listingDateShortest1[1].split("]")--}%
        %{--var listingDateShortest=listingDateShortest2[0].split(",")--}%
        %{--//最长挂牌时间--}%
        %{--var listingDateLongest1='${listingDateLongest}'.split("[")--}%
        %{--var listingDateLongest2=listingDateLongest1[1].split("]")--}%
        %{--var listingDateLongest=listingDateLongest2[0].split(",")--}%
    });


    // 小区交易数据 houseDealContentActive切换
    $(".tabActive").click(function(){
        $(this).addClass("houseDealContentActive").siblings().removeClass("houseDealContentActive");
    })
    //市场分析 marketAnalyseContentActive切换
    $(".tabActive_1").click(function(){
        $(this).addClass("marketAnalyseContentActive").siblings().removeClass("marketAnalyseContentActive");
    })

    // 小区交易数据 houseDealContentActive切换
    $(".tabActive").click(function(){
        console.log("click")
        $(this).addClass("houseDealContentActive").siblings().removeClass("houseDealContentActive");
        var index = $(".tabActive").index(this)
        $(".dealTable").each(function () {
            if ($(".dealTable").index(this) == index)
            {
                if ($(this).hasClass("hide"))
                {
                    $(this).removeClass("hide")
                }

            }
            else {
                if (!$(this).hasClass("hide"))
                {
                    $(this).addClass("hide")
                }
            }
        })
    })
    // 分页器样式
    $(".pagings>a,.pagings>span").addClass("btn btn-secondary waves-effect");
    // 当前分页
    $(".currentStep").css({"background":"#2196F3","color":"#fff","border-color":"#2196F3"});


    // 周边配套
    $(".traffic").hover(function(){
        $(this).addClass("solidActive");
        $(this).siblings().removeClass("solidActive");
        $(this).children("ul").children(".grayCircle").addClass("round_background");
        $(".traffic_img").attr('src', '../../assets/traffic1.png');
        $(".market_img").attr('src', '../../assets/market.png');
        $(".bank_img").attr('src', '../../assets/bank.png');
        $(".school_img").attr('src', '../../assets/school.png');
        $(".hospita_img").attr('src', '../../assets/hospital.png');
        $(".gasStation_img").attr('src', '../../assets/gasStation.png');
        $(this).siblings().removeAttr('src', '../../assets/market1.png');
        $(this).siblings().children("ul").children(".grayCircle").removeClass("round_background");
    })

    $(".banks").hover(function(){
        $(this).addClass("solidActive");
        $(this).siblings().removeClass("solidActive");
        $(this).children("ul").children(".grayCircle").addClass("round_background");
        $(".traffic_img").attr('src', '../../assets/traffic.png');
        $(".bank_img").attr('src', '../../assets/bank1.png');
        $(".school_img").attr('src', '../../assets/school.png');
        $(".hospita_img").attr('src', '../../assets/hospital.png');
        $(".gasStation_img").attr('src', '../../assets/gasStation.png');
        $(".market_img").attr('src', '../../assets/market.png');
        $(this).siblings().children("ul").children(".grayCircle").removeClass("round_background");
    })

    $(".school").hover(function(){
        $(this).addClass("solidActive");
        $(this).siblings().removeClass("solidActive");
        $(this).children("ul").children(".grayCircle").addClass("round_background");
        $(".traffic_img").attr('src', '../../assets/traffic.png');
        $(".bank_img").attr('src', '../../assets/bank.png');
        $(".school_img").attr('src', '../../assets/schoot1.png');
        $(".hospita_img").attr('src', '../../assets/hospital.png');
        $(".gasStation_img").attr('src', '../../assets/gasStation.png');
        $(".market_img").attr('src', '../../assets/market.png');
        $(this).siblings().children("ul").children(".grayCircle").removeClass("round_background");
    })

    $(".market").hover(function(){
        $(this).addClass("solidActive");
        $(this).siblings().removeClass("solidActive");
        $(this).children("ul").children(".grayCircle").addClass("round_background");
        $(".traffic_img").attr('src', '../../assets/traffic.png');
        $(".bank_img").attr('src', '../../assets/bank.png');
        $(".school_img").attr('src', '../../assets/school.png');
        $(".hospita_img").attr('src', '../../assets/hospital.png');
        $(".gasStation_img").attr('src', '../../assets/gasStation.png');
        $(".market_img").attr('src', '../../assets/market1.png');
        $(this).siblings().children("ul").children(".grayCircle").removeClass("round_background");
    })

    $(".hospita").hover(function(){
        $(this).addClass("solidActive");
        $(this).siblings().removeClass("solidActive");
        $(this).children("ul").children(".grayCircle").addClass("round_background");
        $(".traffic_img").attr('src', '../../assets/traffic.png');
        $(".bank_img").attr('src', '../../assets/bank.png');
        $(".school_img").attr('src', '../../assets/school.png');
        $(".hospita_img").attr('src', '../../assets/hospital1.png');
        $(".gasStation_img").attr('src', '../../assets/gasStation.png');
        $(".market_img").attr('src', '../../assets/market.png');
        $(this).siblings().children("ul").children(".grayCircle").removeClass("round_background");
    })

    $(".gasStation").hover(function(){
        $(this).addClass("solidActive");
        $(this).siblings().removeClass("solidActive");
        $(this).children("ul").children(".grayCircle").addClass("round_background");
        $(".traffic_img").attr('src', '../../assets/traffic.png');
        $(".bank_img").attr('src', '../../assets/bank.png');
        $(".school_img").attr('src', '../../assets/school.png');
        $(".hospita_img").attr('src', '../../assets/hospital.png');
        $(".gasStation_img").attr('src', '../../assets/gasStation1.png');
        $(".market_img").attr('src', '../../assets/market.png');
        $(this).siblings().children("ul").children(".grayCircle").removeClass("round_background");
    })
    // 周边配套
    $(".mapDivNav").click(function(){
        $(this).addClass("solidActive");
        $(this).siblings().removeClass("solidActive");
    })

</script>
<script>
    $(function () {


        // 动态获取单元和楼栋的js代码
        $.ajax({
            type: "post",
            url: "/community/communityTable",
            data: {communityId: ${community.id}},
            success: function (data) {

                if (data.status == "success") {
                    var communityTableList=data.communityTableList
                    var dataList=data.communityTableList[0]
//                        var htm="<tr><td>楼栋</td><td id='unit'>单元</td></tr>"
                    var htm=""
                    var max = 0;//最长的数组的length
                    var length=communityTableList.length
                    console.log("length=="+length)
                    if(length==0){
                        htm+="<tr><td colspan='30' style='text-align: left'>暂无数据</td></tr>"
                        $(".communityTable").html(htm)
                    }else{
                        for( x in communityTableList[0]){
                            console.log(communityTableList[0][x])
                            if(communityTableList[0][x].length >= max){
                                max = communityTableList[0][x].length;
                            }
                        }
                        for( var key in communityTableList[0]){
                            var aa=key.split("{");
                            var bb=aa[1].split("}")
                            var ss = bb[0].split("=");
                            htm+="<tr scope='row'><td><a href='/building/show?id="+ss[0]+"&&communityId=${community.id}'>"+ss[1]+"</a></td>"
                            var valueLength=communityTableList[0][key];
                            for(var i=0;i<max;i++){
                                if(!$.isEmptyObject(communityTableList[0][key][i])){
                                    htm+="<td><a href='/unit/show?id="+communityTableList[0][key][i][0]+" '>"+communityTableList[0][key][i][1]+"</a></td>";
                                }else{
                                    htm+="<td style='background: #ccc;'></td>";
                                }
                            }
                            htm+="</tr>"
                        }


                        $(".communityTable").html(htm)
                    }
                }
            },
            error: function () {
                alert("获取失败，请稍后重试");
            }
        });
    })
</script>
</body>
</html>
